<%@ page import="java.util.*" pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='zhyyglhtxt' /></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }

        /*.layui-form-label {*/
        /*    width: 180px;*/
        /*}*/
    </style>
</head>

<body>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <div class="layui-tab-content" style="height: 100%;">
        <div class="layui-tab-item layui-show">
            <div class="layui-container">
                <div style="background: #fff3e0;border: 1px solid #ff9966;padding: 15px 2.5%;border-radius: 5px;" class="layui-show">
                    <p><fmt:message key='wxts' /></p>
                    <br/>
                    <p>1、<fmt:message key='syby' /> <b style="color:red">*</b> <fmt:message key='dxmwbt' />；</p>
                </div>

                <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
                    <form:form commandName="template" method="${_method }" class="layui-form">

                        <input type="hidden" name="_method" value="${_method}">
                        <form:hidden path="id"/>


                        <div class="layui-form-item">
                            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='mbmc' /></label>
                            <div class="layui-input-inline" style="width: 180px;">
                                <form:input path="name" lay-verify="required" class="layui-input"/>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label"><span style="color: red;">*</span> <fmt:message key='jflx' /></label>
                            <div class="layui-input-block">
                                <input type="radio" lay-filter="type" lay-verify="required" name="type"
                                       <c:if test="${template.type == 1}">checked</c:if> value="1" title="<fmt:message key='azl' />">
                                <input type="radio" lay-filter="type" lay-verify="required" name="type"
                                       <c:if test="${template.type == 2}">checked</c:if> value="2" title="<fmt:message key='ajs' />">
                            </div>
                        </div>

                        <div class="layui-form-item feijin-weight" style="display:none;">
                            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='mrsz' /></label>
                            <div class="layui-inline" style="width: 180px;">
                                <form:input path="defaultWeight" lay-verify="required" class="layui-input"/>
                            </div>
                            <div class="layui-inline"><fmt:message key='dwk' /></div>
                        </div>

                        <div class="layui-form-item feijin-weight" style="display:none;">
                            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='mrsf' /></label>
                            <div class="layui-inline" style="width: 180px;">
                                <form:input path="defaultWeightAmount" lay-verify="required" class="layui-input"/>
                            </div>
                            <div class="layui-inline"><fmt:message key='dwy' /></div>
                        </div>

                        <div class="layui-form-item feijin-weight" style="display:none;">
                            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='mrxz' /></label>
                            <div class="layui-inline" style="width: 180px;">
                                <form:input path="defaultAddWeight" lay-verify="required" class="layui-input"/>
                            </div>
                            <div class="layui-inline"><fmt:message key='dwk' /></div>
                        </div>

                        <div class="layui-form-item feijin-weight" style="display:none;">
                            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='mrxf' /></label>
                            <div class="layui-inline" style="width: 180px;">
                                <form:input path="defaultAddWeightAmount" lay-verify="required" class="layui-input"/>
                            </div>
                            <div class="layui-inline"><fmt:message key='dwy' /></div>
                        </div>


                        <div class="layui-form-item  feijin-piece" style="display:none;">
                            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='mrsj' /></label>
                            <div class="layui-inline" style="width: 180px;">
                                <form:input path="defaultPiece" lay-verify="required" class="layui-input"/>
                            </div>
                            <div class="layui-inline"><fmt:message key='dwj' /></div>
                        </div>

                        <div class="layui-form-item feijin-piece" style="display:none;">
                            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='mrsf' /></label>
                            <div class="layui-inline" style="width: 180px;">
                                <form:input path="defaultPieceAmount" lay-verify="required" class="layui-input"/>
                            </div>
                            <div class="layui-inline"><fmt:message key='dwy' /></div>
                        </div>

                        <div class="layui-form-item feijin-piece" style="display:none;">
                            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='mrxj' /></label>
                            <div class="layui-inline" style="width: 180px;">
                                <form:input path="defaultAddPiece" lay-verify="required" class="layui-input"/>
                            </div>
                            <div class="layui-inline"><fmt:message key='dwj' /></div>
                        </div>

                        <div class="layui-form-item feijin-piece" style="display:none;">
                            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='mrxf' /></label>
                            <div class="layui-inline" style="width: 180px;">
                                <form:input path="defaultAddPieceAmount" lay-verify="required" class="layui-input"/>
                            </div>
                            <div class="layui-inline"><fmt:message key='dwy' /></div>
                        </div>

                        <div class="layui-form-item feijin-weight" style="display:none;">
                            <label for="" class="layui-form-label"><fmt:message key='szzdqyyf' /></label>
                            <div class="layui-inline" style="width: 800px;">
                                <table class="layui-table" id="freight-table">
                                    <tr>
                                        <th><fmt:message key='ysd' /></th>
                                        <th><fmt:message key='szdwk' /></th>
                                        <th><fmt:message key='sfdwy' /></th>
                                        <th><fmt:message key='xzdwk' /></th>
                                        <th><fmt:message key='xfdwy' /></th>
                                        <th><fmt:message key='cz' /></th>
                                    </tr>
                                    <c:if test="${_method eq 'PUT' && template.type eq '1'}">

                                        <c:forEach var="item" items="${merchantFreights}" varStatus="status">
                                            <tr>
                                                <td>
                                                <span class="note-txt">
                                                    <c:forEach var="i" varStatus="s" items="${item.merchantFreights}"><c:if test="${s.index > 0}">、</c:if>${i.city}</c:forEach>
                                                </span>
                                                    <input type="hidden" class="note-input" name="merchantFreights[${status.index}].citys" value="${item.citys}">
                                                </td>
                                                <td style="width: 100px;"><input type="text" class="layui-input" name="merchantFreights[${status.index}].firstWeight" value="${item.firstWeight}"></td>
                                                <td style="width: 100px;"><input type="text" class="layui-input" name="merchantFreights[${status.index}].firstWeightAmount" value="${item.firstWeightAmount}"></td>
                                                <td style="width: 100px;"><input type="text" class="layui-input" name="merchantFreights[${status.index}].otherWeight" value="${item.otherWeight}"></td>
                                                <td style="width: 100px;"><input type="text" class="layui-input" name="merchantFreights[${status.index}].otherWeightAmount" value="${item.otherWeightAmount}"></td>
                                                <td style="width: 105px;">
                                                    <input type="button" data-note="${item.citys}" class="layui-btn layui-btn-sm ayui-btn-normal edit-line" value="<fmt:message key='bj' />">
                                                    <input type="button" data-note="${item.citys}" class="layui-btn layui-btn-sm layui-btn-danger delete-line" value="<fmt:message key='sc' />">
                                                </td>
                                            </tr>
                                        </c:forEach>
                                    </c:if>
                                    <tr id="add-line-tr">
                                        <td colspan="6" align="center"><input type="button" class="layui-btn layui-btn-sm add-line" value="<fmt:message key='tjzdqyyf' />"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>


                        <div class="layui-form-item feijin-piece" style="display:none;">
                            <label for="" class="layui-form-label"><fmt:message key='szzdqyyf' /></label>
                            <div class="layui-inline" style="width: 800px;">
                                <table class="layui-table" id="freight-table">
                                    <tr>
                                        <th><fmt:message key='ysd' /></th>
                                        <th><fmt:message key='sjdwj' /></th>
                                        <th><fmt:message key='sfdwy' /></th>
                                        <th><fmt:message key='xjdwj' /></th>
                                        <th><fmt:message key='xfdwy' /></th>
                                        <th><fmt:message key='cz' /></th>
                                    </tr>
                                    <c:if test="${_method eq 'PUT'  && template.type eq '2'}">

                                        <c:forEach var="item" items="${merchantFreights}" varStatus="status">
                                            <tr>
                                                <td>
                                                <span class="note-txt">
                                                    <c:forEach var="i" varStatus="s" items="${item.merchantFreights}"><c:if test="${s.index > 0}">、</c:if>${i.city}</c:forEach>
                                                </span>
                                                    <input type="hidden" class="note-input" name="merchantFreights[${status.index}].citys" value="${item.citys}">
                                                </td>
                                                <td style="width: 100px;"><input type="text" class="layui-input" name="merchantFreights[${status.index}].firstPiece" value="${item.firstPiece}"></td>
                                                <td style="width: 100px;"><input type="text" class="layui-input" name="merchantFreights[${status.index}].firstPieceAmount" value="${item.firstPieceAmount}"></td>
                                                <td style="width: 100px;"><input type="text" class="layui-input" name="merchantFreights[${status.index}].otherPiece" value="${item.otherPiece}"></td>
                                                <td style="width: 100px;"><input type="text" class="layui-input" name="merchantFreights[${status.index}].otherPieceAmount" value="${item.otherPieceAmount}"></td>
                                                <td style="width: 105px;">
                                                    <input type="button" data-note="${item.citys}" class="layui-btn layui-btn-sm ayui-btn-normal edit-line" value="<fmt:message key='bj' />">
                                                    <input type="button" data-note="${item.citys}" class="layui-btn layui-btn-sm layui-btn-danger delete-line" value="<fmt:message key='sc' />">
                                                </td>
                                            </tr>
                                        </c:forEach>
                                    </c:if>
                                    <tr id="add-piece-line-tr">
                                        <td colspan="6" align="center"><input type="button" class="layui-btn layui-btn-sm add-line" value="<fmt:message key='tjzdqyyf' />"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>


                        <div class="layui-form-item" style="display: none;">
                            <label for="" class="layui-form-label"></label>
                            <div class="layui-input-inline">
                                <input type="button" value="<fmt:message key='qd' />" lay-submit id="submit" lay-filter="submit" class="layui-btn">
                            </div>
                        </div>
                    </form:form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script>

    $(function () {

        if ($("input[name='type']:checked").val() == 1) {
            $(".feijin-piece").hide();
            $(".feijin-weight").show();
        }

        if ($("input[name='type']:checked").val() == 2) {
            $(".feijin-piece").show();
            $(".feijin-weight").hide();
        }
    });

    layui.use(['form'], function () {

        var form = layui.form;

        form.on('radio(type)', function (data) {

            if (data.value == 1) {
                $(".feijin-piece").hide();
                $(".feijin-weight").show();
            }

            if (data.value == 2) {
                $(".feijin-piece").show();
                $(".feijin-weight").hide();
            }
        });

        var line = ${fn:length(merchantFreights)};

        $(".add-line").click(function () {
            layer.open({
                type: 2,
                content: "${web_domain}/merchant/freight/province",
                title: "<fmt:message key='tjpsqy' />",
                area: ["80%", "90%"],
                btn: ["<fmt:message key='qr' />", "<fmt:message key='gb' />"],
                yes: function (index, layero) {
                    var subCity = $(layero).find('iframe')[0].contentWindow.citys;
                    if (!subCity || subCity.length === 0) {
                        layer.msg("<fmt:message key='zsxzygdq' />");
                        return;
                    }

                    var cityStr = "";
                    var noteEles = $(".note-input");
                    if (noteEles.length > 0) {
                        noteEles.each(function () {
                            if (!cityStr) {
                                cityStr = $(this).val();
                            } else {
                                cityStr = cityStr + "、" + $(this).val();
                            }
                        })
                    }

                    var flag = true;
                    subCity.forEach(function (value) {
                        if (cityStr.indexOf(value) > -1) {
                            layer.msg(value + "<fmt:message key='ycz' />");
                            flag = false;
                            return;
                        }
                    });

                    if (!flag) {
                        return;
                    }

                    var note = subCity.join("、");
                    var citys = subCity.join("-");

                    if ($("input[name='type']:checked").val() == 1) {
                        var tr = '<tr>\n' +
                                '                            <td><span class="note-txt">' + note + '</span><input class="note-input" type="hidden" name="merchantFreights[' + line + '].citys" value="' + citys + '"></td>\n' +
                                '                            <td style="width: 100px;"><input type="text" lay-verify="required|number|lessZero" class="layui-input" name="merchantFreights[' + line + '].firstWeight"></td>\n' +
                                '                            <td style="width: 100px;"><input type="text" lay-verify="required|number|lessZero" class="layui-input" name="merchantFreights[' + line + '].firstWeightAmount"></td>\n' +
                                '                            <td style="width: 100px;"><input type="text" lay-verify="required|number|lessZero" class="layui-input" name="merchantFreights[' + line + '].otherWeight"></td>\n' +
                                '                            <td style="width: 100px;"><input type="text" lay-verify="required|number|lessZero" class="layui-input" name="merchantFreights[' + line + '].otherWeightAmount"></td>\n' +
                                '                            <td style="width: 105px;">\n' +
                                '                                <input type="button" data-note="' + citys + '" class="layui-btn layui-btn-sm ayui-btn-normal edit-line" value="<fmt:message key='bj' />">\n' +
                                '                                <input type="button" data-note="' + citys + '" class="layui-btn layui-btn-sm layui-btn-danger delete-line" value="<fmt:message key='sc' />">\n' +
                                '                            </td>\n' +
                                '                        </tr>';
                    }

                    if ($("input[name='type']:checked").val() == 2) {
                        var tr = '<tr>\n' +
                                '                            <td><span class="note-txt">' + note + '</span><input class="note-input" type="hidden" name="merchantFreights[' + line + '].citys" value="' + citys + '"></td>\n' +
                                '                            <td style="width: 100px;"><input type="text" lay-verify="required|number|lessZero" class="layui-input" name="merchantFreights[' + line + '].firstPiece"></td>\n' +
                                '                            <td style="width: 100px;"><input type="text" lay-verify="required|number|lessZero" class="layui-input" name="merchantFreights[' + line + '].firstPieceAmount"></td>\n' +
                                '                            <td style="width: 100px;"><input type="text" lay-verify="required|number|lessZero" class="layui-input" name="merchantFreights[' + line + '].otherPiece"></td>\n' +
                                '                            <td style="width: 100px;"><input type="text" lay-verify="required|number|lessZero" class="layui-input" name="merchantFreights[' + line + '].otherPieceAmount"></td>\n' +
                                '                            <td style="width: 105px;">\n' +
                                '                                <input type="button" data-note="' + citys + '" class="layui-btn layui-btn-sm ayui-btn-normal edit-line" value="<fmt:message key='bj' />">\n' +
                                '                                <input type="button" data-note="' + citys + '" class="layui-btn layui-btn-sm layui-btn-danger delete-line" value="<fmt:message key='sc' />">\n' +
                                '                            </td>\n' +
                                '                        </tr>';
                    }

                    if ($("input[name='type']:checked").val() == 1) {
                        $("#add-line-tr").before(tr);
                    }

                    if ($("input[name='type']:checked").val() == 2) {
                        $("#add-piece-line-tr").before(tr);
                    }


                    line++;
                    layer.close(index);
                }
            });
        });


        $("body").on("click", ".edit-line", function () {
            var _this = this;
            var note = this.getAttribute("data-note");

            var storage = window.localStorage;
            storage["note"] = note;

            layer.open({
                type: 2,
                content: "${web_domain}/merchant/freight/province",
                title: "<fmt:message key='bjpsqy' />",
                area: ["80%", "90%"],
                btn: ["<fmt:message key='qr' />", "<fmt:message key='gb' />"],
                yes: function (index, layero) {
                    var subCity = $(layero).find('iframe')[0].contentWindow.citys;
                    if (!subCity || subCity.length === 0) {
                        layer.msg("<fmt:message key='zsxzygdq' />");
                        return;
                    }


                    var cityStr = "";
                    var noteEles = $(".note-input");
                    if (noteEles.length > 0) {
                        noteEles.each(function () {
                            if (!cityStr) {
                                cityStr = $(this).val();
                            } else {
                                cityStr = cityStr + "、" + $(this).val();
                            }
                        })
                    }

                    var flag = true;
                    subCity.forEach(function (value) {
                        if (note.indexOf(value) === -1 && cityStr.indexOf(value) > -1) {
                            layer.msg(value + "<fmt:message key='ycz' />");
                            flag = false;
                            return;
                        }
                    });

                    if (!flag) {
                        return;
                    }

                    _this.setAttribute("data-note", subCity.join("-"));
                    var td = $(_this).parent().parent().find("td").eq(0);
                    td.find(".note-txt").text(subCity.join("、"));
                    td.find("input").val(subCity.join("-"));
                    layer.close(index);
                }
            });
        });

        $("body").on("click", ".delete-line", function () {
            $(this).parent().parent().remove();
        });


        form.on('submit(submit)', function (data) {

            var mainType = $(":radio[name='type']:checked").val();

            if (!mainType) {
                layui.use('layer', function () {
                    layer.msg("<fmt:message key='qxzjflx' />");
                });

                return false;
            }

            layer.load(2);
            $("#template").ajaxSubmit({
                success: function (res) {
                    layer.closeAll();
                    if (res.status) {
                        layer.alert("<fmt:message key='tjcg' />", function () {
                            parent.location.reload();
                        });
                    } else {
                        layer.alert(res.msg);
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</fmt:bundle>
</html>